Javascript Destructuring

The quickest way to explain javascript destructuring is with an example.

Consider this object deconstruction:

This syntax translates to:

Consider what it would take to construct the object in Mark A, rather than to deconstruct an existing object?

You may construct an object like so:

You'll notice the syntax for constructing this payload object is the exact same syntax for destructuring it, only we reversed which side of the assignment payload was on.

Object deconstructors

Next I'll provide a quick overview of different destructuring operations and then we will combine them to get the result above.

Object destructuring

Providing defaults

Renaming destructured properties

Destructuring arrays

Destructuring with spread operators

The spread operator is generally used to collect varargs, like function(...args) {} however, in the context of deconstruction, it collects any elements not explicitly deconstructed.

For instance, spread deconstruction for an object:

For instance, spread deconstruction for array:

Note: You can see how this is some pretty handy syntactic sugar. You can save a lot of writing time and screen space by using these.

Dynamic property name deconstruction

That's the extent of my off-hand knowledge of very fun javascript deconstruction patterns.

Putting it all together

Initially we considered this example and set out to understand its meaning:

We'll take this section by section

Deconstruct collection property of payload and assign value to local const.

Deconstruct result property.

In each, the right hand side of a destructured property name is the value of that property itself which can then be further deconstructed.

Since result is an array, we can use array deconstruction as we demonstrated before to simply get the first result of the result array.

They all effectively do the same thing. / If object destructuring ever looks confusing to you, just remember its the reverse of constructing objects.

Given this, what might code to construct the payload look like?

Take a gander first.

Here's a solution:

Now if we run:

What will the value of data be?

If you've figured that out, you are well on your way to understanding destructuring.

The answer is { rid: 'RID1'}.

Continuing on:

First consider the complimentary object construction:

We see we are defining a payload object with a context property with a hooks property that is an array.

However, perhaps context may be undefined? That's why we provide a default in the destructure.

Consider the following code:

Question: What are the values of hooks and hooks2?

Take a moment if you want.

Answer: The value of each is [].

Now, we've examined each portion of the deconstruction separately, let's look at it one more time:

Ahhh, there we go. Not so confusing now, is it?

Stay tuned for my next destructuring article where we discuss advanced destructuring.

Post script: as one final test:

What is the value of soSad?

tags: rixfeed dev log programming glossary cbs

Rixfeed Dev Log

I just finished writing my first VS Code extension!

Below is the README.md.

Line Note Plus

Line Note Plus is a VSCode extension to add Markdown notes to your code that are visible when hovering over the noted line. Based on Line Note.

VSCode Marketplace

Features

Invoke Add note at current position from the command palette or context menu. You can see the note you wrote as hover text.

Notes are saved by default in $PROJECT_ROOT/.vscode/.linenoteplus like .vscode/.linenoteplus/<short-uid>.md.

Overview

• Edit/open or remove note via Cmd + Click
• Markdown note previews on hover
• Right-click to add note to line
• Right-click to reveal notated line
• Delete a note marker by manually deleting in text editor
• Add a note marker by manually typing in text editor
• Custom note names
• Command to add note
• Command to edit/open note
• Command to remove note
• Command to reveal notated line
• Notes move with code changes
• Notes can be moved between files
• Notes are not affected by refactors
• Add notes within your notes
• Customize notes directory, note marker background color, and annoted line ruler color
• Configure to delete orphaned notes on-save, on-inteveral, on-save-and-on-interval, or never

API

Commands

• linenouteplus.addNote: Add note at current position (Annotate Line)
• linenouteplus.openNote: Edit note at current position (Open Note)
• linenouteplus.revealLine: Reveal line in notated file (Show Note Marker)
• linenouteplus.removeNote: Remove note at current position (Delete Note)

Configuration

• linenoteplus.cleanUpOrphanedNotesInterval: Interval at which to clean up unused notes in the background in ms. Only applies if cleanUpOrphanedNotes is set to on-interval or on-save-and-on-interval. Default: 60000 (60s). For performance, a larger value is recommended.
• linenoteplus.cleanUpOrphanedNotes: Defines the cleanup behavior for orphaned notes. It can be set to on-save, on-interval, on-save-and-on-interval, or never. Default: on-save-and-on-internal. Note that when using on-save or on-save-and-on-interval, if you delete a note marker and save the file then your note file will also be deleted.
• linenoteplus.includePaths: Specifies file pattern globs to scan for note markers. Directories that don't match these patterns will be ignored.
• linenoteplus.gutterIconPath: File path of the icon to be displayed in gutter.
• linenoteplus.lineColor: Sets the background color for inline note markers (Name, HEX, or RGB).
• linenoteplus.rulerColor: Sets the ruler color for notated lines (Name, HEX, or RGB).
• linenoteplus.showGutterIcon: Whether to display the gutter icon in the gutter for a noted line. Default: true.

Demos

Adding a note

Custom note title

Notes move with code changes

Notes can be moved across files

Reveal notated line command

Refactor does not affect notes

Acknowledgements

Line Note Plus is a fork of Line Note by tkrkt. This library's design was also informed by Marginalia by indiejames.

• https://github.com/tkrkt/linenote
• https://github.com/indiejames/marginalia

Known Bugs

• Gutter icon does not display.

Rixfeed Dev Log

I've created a repositor of useful ts-node powered command line utilities.

Link: https://github.com/prmichaelsen/devx

Currently supports only:

• ls-recursive

But the commands can be run globally on unix-like shells (with autocompletion) like devx ls-recursive.

From the README.md:

What is this package?

This is a repository of command line utilities written in typescript for use with ts-node.

How do I run it?

The preferred way to run scripts with the ts-node version specified in the package.json. To do so, use the provided devx bash script. devx bash script.

For example: ./devx ls-scripts.ts src

Use devx command globally

You only need to update your .bashrc, .bash_profile, or .zshrc.

To do so, run ./init and follow the instructions provided.

This will also add bash completion for your scripts.

Rixfeed Dev Log

Introducing a feature that let's you construct ad-hoc ordered lists of pages by using query parameters.

This page is part of a series. If you aren't already viewing the series, then you can do so by clicking here.

Go to the PatrickMichaelsenBot

Use this link to access the Patrick Michaelsen Bot. The Patrick Michaelsen Bot is demo designed to showcase certain features and usecases of the app.

You can try this out, and consider yourself a pre-alpha tester.

Not enough people read this blog to warrant concern for lack of security measures--I think.

Keep in mind, any data is stored and processed by machine learning.

Do not send any personal information or personal confessions to the bot.

Basic measures are in place such that a legitimate actor has no method to access another user's data or messages.

However, the need to account for illegitimate actors is the reason this is pre-alpha, and not alpha.

That being said, also do not abuse the tool. It is true if you're not signed in you will lose your existing data upon creating an account.

However, it is also true that data still exists and that it links to you; either through network information or by voluntary personal information such as name or email address when registering a "new" account.

That said, mind your manners. I will know who you are.

Now! Have fun!

Some things you can try to say to the bot:

Code Question

Conversation:

This is not just an example conversation. This follows an actual conversation I had out of curiosity to see how it would handle modifying existing code. Try it for yourself, see how it does. Its success rate is... variable.

Image Upload

Conversation:

This conversation is me summoning up a widget. This widget is a React Componrnt that, in this case, acts as a user input control for image uploads.

Theres no link to remember, no search page to visit, no outdated docs, no disorganized navigation, and no contacting support when you somehow can't find the thing.

The trigger words do not have to be exact. The bot will infer your meaning based on prior training.

The following all work:

Yes, even with the typos.

And more

Theres other stuff you can do with the bot, but I don't feel like documenting them here, now.

Let's jusy say we'll cover it on the next page. Wink.

- Pat

tags: rixfeed dev log

Rixfeed Dev Log

Today's changes:

Rixfeed is built from a large combination of systems.

I've discovered a very unique, yet useful consequence of the interactions of these different systems.

I can leverage it solve a problem that has plagued me from the start.

I've found it very difficult to design a tagging and categorization system that I like.

I had been heading some posts like so:

And "tagging" them like so:

There's a few obvious problems with this.

Sometimes I want to tag something, but not have the tag included as actual text on the post.

Sometimes I want to write an article, but I don't want to title it.

If it's ever the case that I want neither a title nor a visible tag, then I have to surreptisiously inlcude the tag within the context of the article in order to make it work.

Instead, we take advantage of a characteristic of markdown.

The syntax above is designed to be used for a markdown citation footer.

The citation footer is hidden from the final rendered view because it is only a user convenience for the editor of the plain text markdown.

This means I can leverage this to create hidden tags for your content, should you ever want to not include the tag in your content.

This also means I don't have to have a separate or extra additional tag gui.

We'll see.

We'll have to see how this feels on mobile and the non-vim editor.

I could always make a button to drop in tags that does the correct syntax under the hood.

That's it for now.

Note that the tag for this article is "rixfeed-dev-log" and the post is tagged with that syntax, you just can't see it when you render the content as markdown.

If you're looking at this in plaintext, the tag is at the top of the file, if you're curious.

You now find items with this tag at: rixfeed-dev-log

Note you can put any string with no spaces where I put the 1 and it will be hidden. You could use this to denote page numbers or priority, or subtags, perhaps.

// This should be a separate article at this point.

Hell, you can even do this:

Which may be very interesting to leverage. You could use this to set hidden "properties" that are text searchable.

Then we could allow users to write filters like this:

Which would then be converted to an algolia query.

I haven't sounded out all the potential incongruincies or knowledge gaps in this design yet.

Holy shit, what if you could use this to control feeds and groups, too?

Like you can namespace tags??

Only users with permission to use [@patrick--*] or [@patrick--memes] may use them. Perhaps, anyone can use [@patrick].

This means users can mention @patrick, but not use tags in their namespace unless some permission grants it.

As a result, I could create this tag:

Which anyone can use, and then @patrick can monitor for quality submissions.

Rixfeed Dev Log

Index

This is an index where I will try and store relevant documents along with some useful search queries related to rixfeed.

Think of it like a book's table of contents. Until I build a well organized menu and more powerful feeds and filters, this will serve as the navigation index.

Key Index

Mission critical resources.

• Roadmap
• Roadmap Key - Legend that covers the labeling system I use to indicate the urgency, importance, and category (feature or bug) of backlog items
• Alpha Launch Blockers

Design documents

• link Photomark profile charter
• link Brief discussion on modal interaction, context menus, & the potential role double-tapping will play with the app. Discusses how to deeplink to a node within a feed.
• link - UX doc, suggests min-intrusive pattern with powerful user interactions. Also discusses many existing patterns and their drawbacks.

Blog Posts

• link Stuff you should probably know before going for a code interview
• link Quick search for rixfeed dev logs
• link Chat Feature Summary
• link Track window resize using React Hooks
• TODO: immutability-helpers discussion
• TODO: blog post filter feed

Generic coding blogs & tutorials

• link React code sample of a rapidly prototyped feature rich tooltip toast.

Scratch

This is a collection of scrawling thoughts with no particular effort made in terms of presentation or curation

• link Musings on interactive code blogs, text books, and expandable content
• link I briefly touch on some new features introduced by several commits I made throughout that
• link Design discussion for my home organization solution.
• link Thoughts on rixfeed app tenency, plugins, customization, backreferences, micro media sites.
• link Text nodes feel and act as documents. Documentation will use this vocab going forward.

Utter Rubbish

These thoughts are more akin to tweets than blog posts. They are rather thoughtless.

• link What if apps and websites were designed for adults instead of children and teenagers?
• link Why are backrefences significant? Brief concept exploration.

Rixfeed Dev Log

Note from the author: I include links out to other pages that are usually an aside and optional to explore. Should a resource be necessary for your continued understanding of the article, I will let you know. I hope, when you are reading this, that the features that power it still work. As you may well know, I'm currently in the process of building rixfeed, and while I try to design with backwards compatibility in mind, it's difficult maintaining features that you yourself personally forgot about. As of August 21st 2023, it works.

[bins-0]

The Bin System UX Pattern

This post is an interactive exploration of an experimental UX pattern tentatively named "binning". "Binning" aims to be discoverable, minimize interference with the user's workflow, minimize its screen real estate footprint, present a minimal UX with powerful interactions, and support a large quantity of actions in a relatively small space.

Note that this document is a hurried draft and I make no warranties.

Abstract

Introduction

I was making design considerations for a UX that allows users to evaluate posts in a feed.

For this case study, we will consider an application for rating documents on a letter grade scale from F- to A.

Design Spec 1

This is a specification describing the interface as though it already exists.

There is a grade button in the lower right hand corner. The user can tap once to grade an A. The grade button is large enough to tap on mobile and has dimensions of around 50 x 50px. The user can also drag and drop the button. When the user begins dragging, a full screen overlay appears.

The overlay presents bins labeled F through A. This will yield 5 bins. We can consider the possiblity of also supporting +/- grades later.

Bins are approximately the same relative size as the grade button.

To assign the desired grade, the user drags the grade button to the appropriate bin and drops it into the bin (This is designed to emulate the tactile, real life experience of organizing stacks of papers).

Bins do not appear until the dragging action is in progress.

The bins are arranged left to right.

There are however two rows of bins, in the following fashion:

The top row of bins, when used, grades and files away the document.

When a document is marked as filed, it is omitted from the present view.

A small indicator showing the number of filed documents is displayed between the documents that preceded and succeeded the filed document. The user can tap that indicator to revisit those documents.

Extension to Design 1

This interface, if intuitive and low effort to use, can be generalized to other sentiment and categorization applications.

Each option would have the same left to right bin scheme and include the ability to file by dragging upwards and keep in the current view stack by not dragging upwards.

One final way of interacting with this system could be a double tap. A double tap is a "super interaction", like rating the document S tier instead A tier.

As far as generalized use cases go, here are some I have considered:

• follow/unfollow user
• block user
• report user, report post
• see less/more of this user or community
• snooze
• hide posts from this user
• hide posts from this community/feed/what have you
• and more bins-3

Because it's a 5 bin system, one could combine similar usecases: block, unfollow, hide posts, snooze, and see less are all varying degrees of the same user intent.

Advantages

• Keeps interactions close to thumb zone
• One tap for quick action, drag for more powerful options
• Presents a clean looking, minimal interface
• Dragging or swiping to express interest or disinterest in content is an acceptable UX idiom, widely practiced, and familiar to users
• Minimizes use of valuable screen real estate. Screen real estate is only borrowed when UX control is activated by the user
• Mimics the real world concept of "binning" documents
• Allows users to complete two actions at once bins-1
• bins can be leveraged for data analysis, tagging, categorization, filtering, and searching
• Filed/Unfiled is a strong mental model for organizing data
• It can be designed to be discoverable
• It teaches users how to interact with the system
• It lends itself easily to desktop bins-2
• Some users prefer swiping over long pressing or reaching beyond the thumb zone
• It's fun

Disadvantages

• Iconagraphy can be ambigous & unclear. Users must learn what icons do through trial and error, external resources, intro.js or joyride.js, word of mouth, support, tooltips, adjacent help text sidebar, documenation, search, or info icon popups, tutorials, or lately, chat bots. bins-10
• Swiping is a higher effort action than tapping

There's likely more. However, I would like to highlight the issue regarding iconagraphy because I will later detail potential ways to remediate that issue. A discoverable, intuitive, and learnable icon UX pattern would be groundbreaking to me. Usually it's a tradeoff between power and complexity and value props to ScRe. I aim to maximize power, minimize complexity, maximize value prop, and minimize ScReF.

Before proceeding, consider reading bins-10 if you haven't already. The following section builds on it.

Proposal

To read my thoughts on how to counteract this iconography disadvantage, read on. I will discuss the introduction of a real-world, but not too common user help system.

Read the proposal here: bins-12

-

That concludes this article. My apologies for the meandering format, this was largely stream of conscious.

Likewise I apoligize if the UX of navigating this article was difficult.

Like I said. I like building experimental UIs.

-

rixfeed dev log

bug report

on ios safari, text inputs with a font size smaller than 12* cause your browser to automatically zoom in. this is an undesirable behavior.

i believe i already wrote a hook that fixes this in rixfeed 4.0 but i never ported it over to new pages that use the vim editor

task: disable auto zoom on text input with smaller font sizes

note: the presence of this hook will disable all zoom capabilities. it should only be rendered on pages that render vim editor

* probably

rixfeed dev log - tasks - todo

Rixfeed Dev Log

Thoughts on a deeply linked, highly pluggable, decentralized web

so here's what i'm thinking. it's not a novel concept, but i want it to be ingrained into the app design or culture

back links, or back references, should be very common.

any node on the site that links to another node on the site will create a "reference" and a "back reference" relationship. that means we will be able to travel through the connected space that is made up by more tightly linked nodes. a cluster, if you will.

as part of this back reference mission statement, the goal is to make the app compatible with your needs and abilities at every possible level of integration

first of all i will acknowledge i'm competing against existing and developing social protocols. i'm very excited about them, and would like to steer rixfeed gently in that direction as i learn more about these standards and decentralized networks.

however i plan to integrate customers into every stage of the process. if you're tech savvy enough, you may make your customizations via code. perhaps you even build a plug-in or extension. now, some less tech savvy people can adopt that extension. they can arrange the layout of their page, customize their ux, set preferences for how items are displayed, and even keep separate profiles for each browsing experience.

i know. "so you plan to invent firefox?"

no. there's a few more services i imagine i can offer:

• App tenancy

• Tailor built apps

• Personalized web chat bot training

I think tailor building apps would be interesting.

Anyway, my point is that having many apps on the same codebase, some on the same domain, some on others, but running more or less the same code or relying on the same concepts, makes the possibilities of a heavily back referenced web feel more real, exciting and feasible

what is the value of a back reference? Indulge me.

so yes. the more the web communicates via APIs that allow their content to appear on other sites or allow other users to update or create relationships with their data, the better the web will be

- Pat

..index

rixfeed dev log

Rixfeed Dev Log

What is the value of a back reference?

any time anyone has referenced your material on the public web, you will receive a link back to that material. you can find more of your audience by following those backlinks. it's not helpful to get 20,000,000 views on a tweet when it's shared by screenshots with my name in it that someone would have to deliberately type out--not even copy and paste--but type out--and then search for me on the platforms in which we are at their mercy? why not just use OCR to pull the text and generate companion links. CREDIT the author. you know that's not terribly hard at all to do. you could do it with a little tinkering with python libraries back in the day, by now, i'm sure you could stand something respectable up in a day.

--- ..index

i think im going to start calling them documents instead of nodes.

this feels more natural when working with the documents as an end user, because that's what each of these nodes feel like: documents

they are of course also nodes, and internally nodes power the entire application, from users, to message groups, and beyond

..index

tags: rixfeed dev log

Rixfeed Dev Log

Roadmap

• 🟡6️⃣🐞 - Make Public clobbers timestamps
• 🟢6️⃣ - Make Public displays loading spinner
• 🟢3️⃣ - Update padding for markdown/html components to be less obtrusive link
• 🟡9️⃣🐞 - AskBot summary does not always generate summaries during conversatoins
• 🟢9️⃣ - Background processes and their status are accessible. For instance, when AskBot is summarizing something in the background, there should be a way to check on that or some visual indication that something is happening in the background. See Visual Studio Code, Google Cloud Console for consideration. /* extract into its own node */
• 🟢9️⃣ - Handles to resize various text or reading areas. I would very much like to be able to make the article content larger than 600px wide in some cases (especially when reading code documents)

photomark profile 🟢3️⃣

photomark will be the analogue for the profile model that presents a simple 3x3 grid based photo gallery profile. It will be extended to host stories and shorts. For now, a photomark profile is not designed to fit within the broader pagemark ecosystem--rather, it is use case driven

Acceptance Criteria

• there exists photomark.profile.model.ts
• locally stores:
  • unique profile handle
  • owner user ID
  • posts, followers, and following
  • about (like a description or bio). about is markdown
  • type (comedian, blog, brand etc)
  • slugline: short tag

..index

tags: rixfeed dev log user story task 🟢3️⃣

i just feel that every app shouldn't look like it's geared at children

could we have an app that's actually just decent and functional without all the flash and the bugs?

..index

tags: rixfeed dev log

Rixfeed Dev Log

Alpha launch blockers:

• ensure summaries are created, there seems to be a bug
• improve real-time chat update speed. fix message poller to do a direct lookup for the newly created nodes. this will require storing the IDs of the created nodes in the event bus. potentially one could debounce subscription updates
• test sign up workflow end to end for a ghost profile
• test signup workflow end to end for an Ask profile. when you sign up, i'll create an Ask profile for the user by default. this user will be their virtual assistant (whose identity they may also assume (by setting their active user ID to the he Ask profile's ID)
• fix interactions that feel "sticky", like menu open, profile select, and potentially others. this means I will also likely have to update the routing design
• entering a direct ID in a Search should always bring that node to the top of the results

Nice to haves:

• update menu bar. i can envision a single row of menu icons at the very bottom of the screen. perhaps with a small chat input inline or over top of it. some of these buttons are actions and some of them are collections. when you tap a collection, it will either 1) pop up another level above with the next set of items or 2) open a larger menu with the icons and a search/filter icon. there should also be a master grid you can filter, very similar to ios's home screen and app search filter. you could build "tool sets" and "tool bars" into homes screens. this UX concept lends itself nicely to the current design for the "tool wizards". that is the statically routed, server side render oriented workflows for complicated user interactions that store their working state on the server. the interaction between wizard steps is a Directed Graph and acts as a state machine. server actions are triggered by accessing the route. for instance, in an image upload scenario, after clicking upload i will be directed first to an uploading landing page that simply displays a spinner. when the upload finishes, the user is redirected to either an error or success route. so, all that said, the route for such a thing is /tools/select-image?w=<workflow-id>&s=uploading, for example. or /t/ for short hand. since designing that, i made an unrelated design decision to make two part routes act as information on the active application and the selected ID. different applications and will render different menus and components for that ID. /ask/PatrickMichaelsenBot renders a chat bot interface. /profile/PatrickMichaelsenBot . currently the tools functionality is statically coded and the app ID and ID combination is dynamic. but I don't see why we couldn't represent the tool structure with that same pattern: /tools/upload-image. we could even go so far as to include the map as the step. i haven't explored what the third route parameter should be. i think for now i will rely on the less committal query params. anyway, the final path could be: /tools/upload-image?map=success&filters=id:<workflow-id> this plays into map and filter syntax i established for the summary features i implemented. map transforms the results of the node. it determines how the component is rendered. if a type is not mappable, the node is rendered as is. but you might want to filter on that node type as well so you don't get intermingled results. if multiple maps are provided, they are applied with precedence determined by their input order. if a filter is for a single node, it may make sense to catch that during the service layer and make the cheapest access cal available. i expect this to be a firestore query, but who knows, algolia instant look ups or filters may be cheaper or faster. ya never know. one thought is with an algolia filter i could get all the necessary data in one call. filter for private profile, active people, upload-image, and workflow ID all at the same time. doing this however does require figuring out which exactly are which only after you receive the results. doing so shouldn't be terrible difficult. this is getting dangerously close to hydration, which i dare not do. well use utility methods to help with nodes that reference each other. i dare not mess with hydration. we can then, later on, experiment with sending data updates as transactions
• make profile icon return to profiles page

tags: rixfeed dev log

---

for the text above, please note any concepts ideas words or phrases that would be good to add to a glossary or to have a link to reference more information on that subject